<script setup>
import {  ref } from 'vue'
const searchData = ref()
const props = defineProps(['title', 'titleFunction', 'categoryList'])
const emit = defineEmits(['search'])
const search = () => {
  emit('search', searchData.value)
}
const form = ref({
  category: 1,
  fileUrl: []
})
const visible = ref(false)
const btnClick = () => {
  visible.value = true
}
const uploadUrl = 'http://localhost:3000/admin/file/upload/'

const rulesMap = {
  fileUrl: [
    {
      required: true,
      message: '请先上传文件',
    }
  ]
}
</script>

<template>
  <div class="top-title">
    <yk-space justify="between">
      <div class="left">{{ props.title }}</div>
      <div class="right">
        <yk-space align="center">
          <div v-for="(item, index) in titleFunction" :key="index">
            <yk-button  v-if="item.type === 'button'" :type="item.typeButton" @click="btnClick">{{ item.text }}</yk-button>
            <div v-else-if="item.type === 'text'"  class="toptitle-text">{{ item.text }}</div>
            <yk-input-search v-else style="width: 320px" :placeholder="item.placeholder" v-model="searchData"  @input="search">
              <template #suffix>
                <yk-button type="secondary">
                  <template #icon>
                    <IconSearchOutline />
                  </template>
                </yk-button>
              </template>
            </yk-input-search>
            </div>
          </yk-space>
      </div>
      <yk-modal v-model="visible" :title="'上传' + props.title" >
          <yk-form ref="formRef" :model="form" :rules="rulesMap" >
          <yk-form-item label="所属分类" field="category"  >
            <yk-radio-group v-model="form.category" type="button">
              <yk-radio :value="1">未分类</yk-radio>
              <yk-radio v-for="(item, index) in props.categoryList" :key="item.ID" :value="item.ID">{{ item.category_name }}</yk-radio>
            </yk-radio-group>
          </yk-form-item>
          <yk-form-item label="" field="fileUrl"  >
            <yk-upload
              :upload-url="uploadUrl"
              :multiple="false"
              :file-list="form.fileUrl"
            ></yk-upload>
          </yk-form-item>
        </yk-form>
      </yk-modal>
    </yk-space>
  </div>
</template>

<style scoped lang='less'>
.top-title {
  width: 100%;
  .left {
    font-size: 24px;
    font-weight: 600;
  }

  .right {
    .toptitle-text {
      color: @gray-6;
    }
  }
}
</style>